<!DOCTYPE html>
<!-- 
  To see this demo, start a web server and load this page.
  Instead of async/await, you can use Promise style chains.
  In your browser's dev tools network panel, you will see that all vexflow-font-xxx.js files are loaded
  when we view this page, due to the chain of calls to Vex.Flow.fetchMusicFont(...).
-->
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      html {
        font: 16px 'Helvetica Neue', Arial, sans-serif;
      }
      body {
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <p>
      To see the demo, start a web server and load this page (e.g., `npx http-server` and navigate to
      <a href="http://127.0.0.1:8080/demos/fonts/core-with-promise.html"
        >http://127.0.0.1:8080/demos/fonts/core-with-promise.html</a
      >).
    </p>
    <p>
      Using <b>vexflow-core.js</b> allows your webpage to load a small initial bundle. It will load fonts on demand when
      you call <code>Vex.Flow.fetchMusicFont(fontName)</code>. This method is asynchronous and returns a Promise.
    </p>
    <p>Open your browser's developer tools to see that font modules are downloaded upon request:</p>
    <p>View the page's source.</p>
    <div id="output"></div>
    <p>
      <a href="core.html">See: core.html</a><br />
      <a href="all.html">See: all.html</a>
    </p>
    <!--
        The vexflow-core.js build includes no music fonts.
    -->
    <script src="../../build/cjs/vexflow-core.js"></script>
    <script>
      // Each call to fetchMusicFont() loads a font bundle.
      // You can skip some fonts if you will not be using them.
      // See your browser's developer tools > network tab for details.
      Vex.Flow.fetchMusicFont('Bravura')
        .then(() => Vex.Flow.fetchMusicFont('Gonville'))
        .then(() => Vex.Flow.fetchMusicFont('Petaluma'))
        .then(() => Vex.Flow.fetchMusicFont('Leland'))
        .then(() => Vex.Flow.fetchMusicFont('Custom'))
        .then(onFontsLoaded);

      function onFontsLoaded() {
        // The first argument is the primary music engraving font.
        // The others are fallbacks, in case a glyph is not found in the first music font.
        Vex.Flow.setMusicFont('Petaluma', 'Bravura', 'Leland', 'Gonville', 'Custom');

        const factory = new Vex.Flow.Factory({ renderer: { elementId: 'output', width: 500, height: 200 } });
        const score = factory.EasyScore();
        const system = factory.System();
        system
          .addStave({
            voices: [
              score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
              score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
            ],
          })
          .addClef('treble')
          .addTimeSignature('4/4');
        factory.draw();
      }
    </script>
  </body>
</html>
